<template>
  <div class="page-container">
    <img class="question-back" src="/static/img/back.gif">
    <img class="question-panel page-container" id="resImg" ref="resImgPanel" :src="resImg">
    <img id="gameIcon" src="/static/img/icon.png">
    <router-link to='/cover'>
      <img class="end-btn" id="btn1" src="/static/img/restart.png">
    </router-link>
    <img class="end-btn" id="btn2" @click="shareGame" src="/static/img/pk.png">
    <router-link to='/download'>
      <img class="end-btn" id="btn3" src="/static/img/strong.png">
    </router-link>
    <img class="question-back" id="share-back" v-show="shareShow" src="/static/img/sharePanel.png">

    
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
  data () {
    return {
      score: 0,
      resImg: '',
      shareShow: false,
      resTitle: '',
      resPercent: '',
    }
  },
  mounted: function() {
    this.score = this.$cookie.get('score')
    
    if (this.score <= 2) {
      this.resImg = "/static/img/bird.png"
      this.resTitle = "麻雀"
      this.resPercent = "10%"
    } else if (this.score >= 3 && this.score <= 5) {
      this.resImg = "/static/img/person.png"
      this.resTitle = "雀民"
      this.resPercent = "50%"
    } else if (this.score >= 6 && this.score <=7) {
      this.resImg = "/static/img/wang.png"
      this.resTitle = "雀王"
      this.resPercent = "80%"
    } else if (this.score >= 8) {
      this.resImg = "/static/img/god.png"
      this.resTitle = "雀神"
      this.resPercent = "99%"
    } else {
      this.resImg = "/static/img/bird.png"
      this.resTitle = "麻雀"
      this.resPercent = "10%"
    }

    this.$refs.resImgPanel.onload = () => {
      let width = $("#resImg").width()
      let height = $("#resImg").height()
      let iconWidth = width * 0.1
      $("#gameIcon").css('width', `${iconWidth}px`)
      let iconLeft = width * 0.28
      $("#gameIcon").css('left', `${iconLeft}px`)
      let iconTop = height * 0.32
      $("#gameIcon").css('top', `${iconTop}px`)
      let btnWidth = width * 0.6
      $(".end-btn").css('width', `${btnWidth}px`)
      let btnLeft = (width - btnWidth) / 2
      $(".end-btn").css('left', `${btnLeft}px`)
      let btn1Top = height * 0.5
      $("#btn1").css('top', `${btn1Top}px`)
      let btn2Top = height * 0.62
      $("#btn2").css('top', `${btn2Top}px`)
      let btn3Top = height * 0.74
      $("#btn3").css('top', `${btn3Top}px`)
    }

    let tl = new TimelineLite();
    tl
      .from("#resImg", 0.5, {
        x: "-=500px"
      })
      .from("#gameIcon", 0.5, {
        scale: 5,
        opacity: 0
      })

    this.getSignPackage()
  },
  methods: {
    getSignPackage: function() {
      let currentUrl = window.location.href
      let urlArr = currentUrl.split("#")
      let url = encodeURIComponent(urlArr[0])
      // alert(currentUrl)
      // alert(url)
      this.$axios.get(`getAccess.php?url=${url}`)
            .then(res => {
              // console.log(res)
              this.setWxConfig(res.data)
            })
            .catch(error => {
              console.log(error)
            })
    },
    setWxConfig: function(data) {
      let score = this.$cookie.get('score')
      let hideShareTemp = this.hideShare
      let resTitle = this.resTitle
      let resPercent = this.resPercent
      wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名
          jsApiList: [
            'onMenuShareTimeline'
          ] // 必填，需要使用的JS接口列表
      });
      wx.ready(function() {
        console.log('接口配置信息已经完成')
        wx.onMenuShareTimeline({
          title: `我在“雀神挑战赛”中获得了“${resTitle}”称号，击败了${resPercent}的选手，看看你能打败多少人？`,
          link: 'http://www.66nmgame.com/answer.html',
          imgUrl: 'http://www.66nmgame.com/static/img/share.png',
          success: function() {
            console.log('用户点击按钮回调')
            hideShareTemp()
          }
        })
      })
    },

    shareGame: function() {
      this.shareShow = true
    },

    hideShare: function() {
      this.shareShow = false
    }





  }
}
</script>
